<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'
import { CreateElement } from 'vue'

@Component({
  name: 'RenderTag'
})
export default class extends Vue {
  // tag type or color
  @Prop({ type: Object, required: false, default: () => ({}) })
  private tagType!: { [key: string]: string }
  // tag text
  @Prop({ type: Object, required: false, default: () => ({}) })
  private tagText!: { [key: string]: string }

  render (h: CreateElement) {
    return h('el-table-column', {
      props: this.$attrs,
      scopedSlots: {
        default: ({ row }) => {
          const val = row[this.$attrs.prop]
          const isValid = val !== undefined && val !== null && val !== ''
          return isValid
            ? h(
              'el-tag',
              {
                class: 'table-column-tag',
                props: {
                  type: this.tagType[val],
                  color: this.tagType[val],
                  effect: 'dark'
                }
              },
              this.tagText[val]
            )
            : null
        }
      }
    })
  }
}
</script>

<style lang="scss" scoped>
.table-column-tag {
  border-color: transparent;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
